// Name:            Style
// Description:     Sets default values for HTML elements and utility
//
// ========================================================================


// Variables
// ========================================================================

//== Scaffolding
//
// ## Settings for some of the most global styles.

@box-size-base:                                 2px;
@box-4:                                         (@box-size-base*2);
@box-6:                                         (@box-size-base*3);
@box-8:                                         (@box-size-base*4);
@box-10:                                        (@box-size-base*5);
@box-12:                                        (@box-size-base*6);
@box-14:                                        (@box-size-base*7);


@utility-align-horizontal:                      15px;
@utility-align-vertical:                        15px;

@utility-margin:                                15px;
@utility-margin-small:                          5px;
@utility-margin-large:                          50px;

@utility-border-rounded:                        5px;

@utility-heading-large-font-size:               52px;
@utility-heading-large-line-height:             64px;

@utility-link-muted-color:                      #444;
@utility-link-muted-hover-color:                #444;

@utility-scrollable-text-height:                300px;

@utility-scrollable-box-height:                 170px;
@utility-scrollable-box-padding:                10px;
@utility-scrollable-box-border:                 #ddd;
@utility-scrollable-box-border-width:           1px;


@text-small-font-size:                          11px;
@text-small-line-height:                        16px;
@text-large-font-size:                          18px;
@text-large-line-height:                        24px;


/* ========================================================================
   Component: Style
 ========================================================================== */


/* Body
 ========================================================================== */

html {
  margin: 0;
  padding: 0;
}

body {
  padding: 0;
  margin: 0;
  line-height: @line-height-base;
  color: @text-color;
  font-size: @font-size-base;
}



/* Typography
 ========================================================================== */

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 300 !important;
}

h1.block,
h2.block,
h3.block,
h4.block,
h5.block,
h6.block {
  padding-top: 10px;
  padding-bottom: 10px;
}

h1.header-dividing,
h2.header-dividing,
h3.header-dividing,
h4.header-dividing,
h5.header-dividing,
h6.header-dividing {
  padding-bottom: 9px;
  border-bottom: 1px solid #e5e5e5;
}

.btn {
  font-size: @font-size-base;
}

.btn-sm, .btn-group-sm > .btn {
  font-size: @font-size-small;
}

a {
  text-shadow: none !important;
  color: @link-color;
}

a:hover,
a:focus {
  color: @link-hover-color;
  text-decoration: none;
}

/* Disable link outlines after click */
a,
a:hover,
a:active,
a:focus,
button,
button:active,
button:focus,
object,
embed,
input::-moz-focus-inner {
  outline: 0;
}

*:focus {
  outline: 0 !important;
}

textarea:focus,
select:focus,
input[type="text"]:focus,
input[type="password"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="time"]:focus,
input[type="week"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="color"]:focus,
.uneditable-input:focus {
  outline: 0;
  outline: thin dotted \9;
  /* IE6-9 */
  -webkit-box-shadow: none !important;
  -moz-box-shadow: none !important;
  box-shadow: none !important;
}

div,
input,
select,
textarea,
table,
td,
th,
p,
a,
button,
ul,
code,
pre,
li,
nav {
  -webkit-border-radius: 0 !important;
  -moz-border-radius: 0 !important;
  border-radius: 0 !important;
}

input[disabled],
select[disabled],
textarea[disabled] {
  cursor: not-allowed;
  background-color: #F4F4F4 !important;
}

input[readonly],
select[readonly],
textarea[readonly] {
  cursor: not-allowed;
  background-color: #F9F9F9 !important;
}

label {
  font-weight: normal;
}


hr {
  border-top: 1px solid #E0DFDF;
  display: block;
  font-size: 0px;
  height: 0px;
  margin: 12px 0px;
  overflow: hidden;
}


form legend,
form .form-section {
  display: block;
  padding: 8px 0;
  border-bottom: 1px dashed rgba(0, 0, 0, 0.2);
  font-size: 16px;
  font-weight: 300;
  color: #222222;
  margin: 10px 0px 20px;
}

legend {
  margin-top: 0px;
  background: none;
}


// /***
// Fontawesome Icons
// ***/
// [class^="fa-"]:not(.fa-stack),
// [class^="glyphicon-"],
// [class^="icon-"],
// [class*=" fa-"]:not(.fa-stack),
// [class*=" glyphicon-"]
// [class*=" icon-"] {
//   display: inline-block;
//   font-size: 14px;
//   *margin-right: .3em;
//   line-height: 14px;
//   -webkit-font-smoothing: antialiased;
// }


// header {
//   display: block;
//   padding: 8px 0;
//   border-bottom: 1px dashed rgba(0, 0, 0, 0.2);
//   background: white;
//   font-size: 16px;
//   font-weight: 300;
//   color: #232323;
//   margin: 10px 0 20px 0;
// }

/* Utility Section.
 * Bootstrap also provide some utility:
 * 1. Floats: clearfix  center-block pull-right pull-left
 * 2. Toggling content: hide show invisible text-hide hidden
 * 3. Affix: affix
 ========================================================================== */


/* Double hr and hr margin
 ========================================================================== */
.hr-double {
  border-bottom: 1px solid #FEFEFE;
  border-top: 1px solid #E0DFDF;
  height: 3px;
}

hr.dotted, .hr-dotted {
  border-top-style: dotted;
}

.hr-double.dotted {
  border-bottom-style: dotted;
}

.hr-14 {
  margin: @box-14 0;
}

.hr-12 {
  margin: @box-12 0;
}

.hr-10 {
  margin: @box-10 0;
}

.hr-8 {
  margin: @box-8 0;
}

.hr-6 {
  margin: @box-6 0;
}

.hr-4 {
  margin: @box-4 0;
}

.hr-2 {
  margin: @box-size-base 0;
}


/* Display
 ========================================================================== */

/*
 * Display
 */

.display-block { display: block !important; }
.display-inline { display: inline !important; }
.display-inline-block { display: inline-block !important; }

/*
 * Visibility
 * Avoids setting display to `block`
 */

/* Desktop and bigger */
@media (min-width: @screen-md) {

  .visible-small { display: none !important; }
  .visible-medium { display: none !important; }
  .hidden-large { display: none !important; }

}

/* Only tablets portrait */
@media (min-width: @screen-sm) and (max-width: @screen-sm-max) {

  .visible-small { display: none !important; }
  .visible-large { display: none !important ; }
  .hidden-medium { display: none !important; }

}

/* Phone landscape and smaller */
@media (max-width: @screen-xs-max) {

  .visible-medium { display: none !important; }
  .visible-large { display: none !important; }
  .hidden-small { display: none !important; }

}

/* Remove from the flow and screen readers on any device */
.hidden {
  display: none !important;
  visibility: hidden !important;
}

/* It's hidden, but still affects layout */
.invisible { visibility: hidden !important; }

/* Show on hover */
.visible-hover:hover .hidden,
.visible-hover:hover .invisible {
  display: block !important;
  visibility: visible !important;
}

.visible-hover-inline:hover .hidden,
.visible-hover-inline:hover .invisible {
  display: inline-block !important;
  visibility: visible !important;
}

/* Position of block elements
 ========================================================================== */

.position-relative {
  position: relative;
}

.position-absolute {
  position: absolute;
}


/* Alignment of block elements
 ========================================================================== */

/*
 * Float blocks
 * 1. Prevent content overflow on small devices
 */

.float-left { float: left; }
.float-right { float: right; }

/* 1 */
[class*='float-'] { max-width: 100%; }


/* Alignment of images and objects
 ========================================================================== */

/*
 * Alignment
 */

[class*='align-'] {
  display: block;
  margin-bottom: @utility-align-vertical;
}

.align-left {
  margin-right: @utility-align-horizontal;
  float: left;
}

.align-right {
  margin-left: @utility-align-horizontal;
  float: right;
}

/* Tablet and bigger */
@media (min-width: @screen-sm) {

  .align-medium-left {
    margin-right: @utility-align-horizontal;
    margin-bottom: @utility-align-vertical;
    float: left;
  }

  .align-medium-right {
    margin-left: @utility-align-horizontal;
    margin-bottom: @utility-align-vertical;
    float: right;
  }

}

.align-center {
  margin-left: auto;
  margin-right: auto;
}


/* Vertical alignment
 ========================================================================== */

/*
 * Remove whitespace between child elements when using `inline-block`
 */

.vertical-align { font-size: 0.001px; }

/*
 *  The `vertical-align` container needs a specific height
 */

.vertical-align:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}

/*
 * Sub-object which can have any height
 * 1. Reset whitespace hack
 */

.vertical-align-middle,
.vertical-align-bottom {
  display: inline-block;
  max-width: 100%;
  /* 1 */
  font-size: 1rem;
}

.vertical-align-middle { vertical-align: middle; }
.vertical-align-bottom { vertical-align: bottom; }

/*
 *  This helper class is very useful to extend the `html` and `body` element to the full height of the page.
 */

.height-1-1 { height: 100%; }


/* Responsive objects
 * Note: Images are already responsive by default, see Base component
 ========================================================================== */

/*
 * 1. Corrects max-width/max-height behavior if padding and border are used
 */

.responsive-width,
.responsive-height {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

/*
 * Responsiveness: Sets a maximum width relative to the parent and auto scales the height
 */

.responsive-width {
  max-width: 100%;
  height: auto;
}

/*
 * Responsiveness: Sets a maximum height relative to the parent and auto scales the width
 * Only works if the parent element has a fixed height.
 */

.responsive-height {
  max-height: 100%;
  width: auto;
}


/* Margin
 ========================================================================== */

/*
 * Create a block with the same margin of a paragraph
 * Add margin if adjacent element
 */

.margin { margin-bottom: @utility-margin; }
* + .margin { margin-top: @utility-margin; }

.margin-top { margin-top: @utility-margin !important; }
.margin-bottom { margin-bottom: @utility-margin !important; }
.margin-left { margin-left: @utility-margin !important; }
.margin-right { margin-right: @utility-margin !important; }

/*
 * Larger margins
 */

.margin-large { margin-bottom: @utility-margin-large; }
* + .margin-large { margin-top: @utility-margin-large; }

.margin-large-top { margin-top: @utility-margin-large !important; }
.margin-large-bottom { margin-bottom: @utility-margin-large !important; }
.margin-large-left { margin-left: @utility-margin-large !important; }
.margin-large-right { margin-right: @utility-margin-large !important; }

/*
 * Smaller margins
 */

.margin-small { margin-bottom: @utility-margin-small; }
* + .margin-small { margin-top: @utility-margin-small; }

.margin-small-top { margin-top: @utility-margin-small !important; }
.margin-small-bottom { margin-bottom: @utility-margin-small !important; }
.margin-small-left { margin-left: @utility-margin-small !important; }
.margin-small-right { margin-right: @utility-margin-small !important; }

/*
 * Remove margins
 */

.marginless { margin: 0 !important; }
.margin-top-less { margin-top: 0 !important; }
.margin-bottom-less { margin-bottom: 0 !important; }
.margin-left-less { margin-left: 0 !important; }
.margin-right-less { margin-right: 0 !important; }

/*
 * Remove all
 */
.margin-padding-less {
  margin: 0px !important;
  padding: 0px !important;
}

/* Padding
 ========================================================================== */

/*
 * Remove paddings
 */

.paddingless { padding: 0 !important; }
.padding-top-less { padding-top: 0 !important; }
.padding-bottom-less { padding-bottom: 0 !important; }
.padding-left-less { padding-left: 0 !important; }
.padding-right-less { padding-right: 0 !important; }


/* Border
 ========================================================================== */

.border-circle { border-radius: 50%; }
.border-rounded { border-radius: @utility-border-rounded; }
.border-roundless { border-radius: 0 !important; }

/*
 * Remove border
 */

.borderless { border: 0 none !important; }
.border-top-less { border-top: 0 none  !important; }
.border-bottom-less { border-bottom: 0 none !important; }
.border-left-less { border-left: 0 none !important; }
.border-right-less { border-right: 0 none !important; }


/* Underline
 ========================================================================== */

.underlineless {
  text-decoration: none ! important;
}

.underlineless:hover {
  text-decoration: none ! important;
}

/* box-shadow
 ========================================================================== */

.boxshadowless {
  box-shadow: none ! important;
}

.textshadowless {
  text-shadow: none ! important;
}


/* Link
 ========================================================================== */

.link-muted,
.link-muted a { color: @utility-link-muted-color; }

.link-muted:hover,
.link-muted a:hover { color: @utility-link-muted-hover-color; }


/* Scrollable
 ========================================================================== */

/*
 * Enable scrolling for preformatted text
 */

.scrollable-text {
  height: @utility-scrollable-text-height;
  overflow-y: scroll;
  resize: both;
}

/*
 * Box with scrolling enabled
 */

.scrollable-box {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  height: @utility-scrollable-box-height;
  padding: @utility-scrollable-box-padding;
  border: @utility-scrollable-box-border-width solid @utility-scrollable-box-border;
  overflow: auto;
  resize: both;
}

/*
 * Remove margin from the last-child
 */

.scrollable-box > :last-child { margin-bottom: 0; }


/* Background color.
 ========================================================================== */

.bg-blue {
  background-color: @blue;
}

.bg-light-blue {
  background-color: @lightblue;
}

.bg-dark-blue {
  background-color: @darkblue;
}

.bg-red {
  background-color: @red;
}

.bg-dark-red {
  background-color: @darkred ;
}

.bg-yellow {
  background-color: @yellow ;
}

.bg-green {
  background-color: @green ;
}

.bg-pale-green {
  background-color: @palegreen;
}
.bg-dark-green {
  background-color: @darkgreen ;
}

.bg-purple {
  background-color: @purple ;
}

.bg-light-gray {
  background-color: @lightgray;
}

.bg-grey {
  background-color: @gray ;
}

.bg-dark-gray {
  background-color: @darkgray ;
}

.bg-lighten {
  background-color: @lighten ;
}

.bg-white {
  background-color: @white ;
}

.bg-orange {
  background-color: @orange ;
}

.bg-dark-orange {
  background-color: @darkorange ;
}

.bg-pink {
  background-color: @pink ;
}

.bg-dark-pink {
  background-color: @darkpink ;
}

.bg-magenta {
  background-color: @magenta ;
}

.bg-teal {
  background-color: @teal ;
}


.bg-snow {
  background-color: @snow ;
}

.bg-whitesmoke {
  background-color: @whitesmoke;
}

.bg-seashell {
  background-color: @seashell ;
}

.bg-ivory {
  background-color: @ivory ;
}

.bg-platinum {
  background-color: @platinum ;
}

.bg-silver {
  background-color: @silver ;
}

.bg-sonic-silver {
  background-color: @sonic-silver ;
}

.bg-storm-cloud {
  background-color: @storm-cloud ;
}

.bg-lightcarbon {
  background-color: @lightcarbon;
}

.bg-carbon {
  background-color: @carbon;
}

.bg-darkcarbon {
  background-color: @darkcarbon ;
}

.bg-sky {
  background-color: @sky ;
}

.bg-azure {
  background-color: @azure ;
}

.bg-blueberry {
  background-color: @blueberry ;
}

.bg-gold {
  background-color: @gold ;
}

.bg-maroon {
  background-color: @maroon ;
}


/* Text modifiers
 ========================================================================== */
.theme-primary {
    color: @theme-primary !important;
}

.theme-secondary {
    color: @theme-secondary !important;
}
.theme-thirdcolor {
    color: @theme-thirdcolor !important;
}
.theme-fourthcolor {
    color: @theme-fourthcolor !important;
}
.theme-fifthcolor {
    color: @theme-fifthcolor !important;
}

.text-white {
    color: @white !important;
}

.text-snow {
    color: @snow !important;
}

.text-whitesmoke {
    color: @whitesmoke !important;
}

.text-seashell {
    color: @seashell !important;
}

.text-ivory {
    color: @ivory !important;
}

.text-platinum {
    color: @platinum !important;
}

.text-lightgray {
    color: @lightgray !important;
}

.text-gray {
    color: @gray !important;
}

.text-darkgray {
    color: @darkgray !important;
}

.text-silver {
    color: @silver !important;
}

.text-sonic-silver {
    color: @sonic-silver !important;
}

.text-storm-cloud {
    color: @storm-cloud !important;
}

.text-lightcarbon {
    color: @lightcarbon !important;
}

.text-carbon {
    color: @carbon !important;
}

.text-slate-gray {
    color: @slate-gray !important;
}

.text-darkcarbon {
    color: @darkcarbon !important;
}

.text-blue {
    color: @blue !important;
}

.text-sky {
    color: @sky !important;
}

.text-azure {
    color: @azure !important;
}

.text-blueberry {
    color: @blueberry !important;
}

.text-palegreen {
    color: @palegreen !important;
}

.text-green {
    color: @green !important;
}

.text-lightyellow {
    color: @lightyellow !important;
}

.text-yellow {
    color: @yellow !important;
}

.text-gold {
    color: @gold !important;
}

.text-orange {
    color: @orange !important;
}

.text-darkred {
    color: @darkred !important;
}

.text-darkorange {
    color: @darkorange !important;
}

.text-red {
    color: @red !important;
}

.text-pink {
    color: @pink !important;
}

.text-darkpink {
    color: @darkpink !important;
}

.text-magenta {
    color: @magenta !important;
}

.text-purple {
    color: @purple !important;
}

.text-maroon {
    color: @maroon !important;
}

/* border modifiers
 ========================================================================== */
     /*Border Colors*/
.bordered-solid {
    border-style: solid !important;
}
.bordered-dashed {
    border-style: dashed !important;
}
.bordered-dotted {
    border-style: dotted !important;
}
.bordered-double {
    border-style: double !important;
}

.bordered-1 {
    border: 1px solid @white;
}

.bordered-2 {
    border: 2px solid @white;
}

.bordered-3 {
    border: 3px solid @white;
}

.bordered-4 {
    border: 4px solid @white;
}

.bordered-5 {
    border: 5px solid @white;
}

 .bordered-bottom-1 {
     border-bottom: 1px solid @white;
 }

 .bordered-bottom-2 {
     border-bottom: 2px solid @white;
 }

 .bordered-bottom-3 {
     border-bottom: 3px solid @white;
 }

 .bordered-bottom-4 {
     border-bottom: 4px solid @white;
 }

 .bordered-bottom-5 {
     border-bottom: 5px solid @white;
 }

 .bordered-top-1 {
     border-top: 1px solid @white;
 }

 .bordered-top-2 {
     border-top: 2px solid @white;
 }

 .bordered-top-3 {
     border-top: 3px solid @white;
 }

 .bordered-top-4 {
     border-top: 4px solid @white;
 }

 .bordered-top-5 {
     border-top: 5px solid @white;
 }

 .bordered-left-1 {
     border-left: 1px solid @white;
 }

 .bordered-left-2 {
     border-left: 2px solid @white;
 }

 .bordered-left-3 {
     border-left: 3px solid @white;
 }

 .bordered-left-4 {
     border-left: 4px solid @white;
 }

 .bordered-left-5 {
     border-left: 5px solid @white;
 }

 .bordered-right-1 {
     border-right: 1px solid @white;
 }

 .bordered-right-2 {
     border-right: 2px solid @white;
 }

 .bordered-right-3 {
     border-right: 3px solid @white;
 }

 .bordered-right-4 {
     border-right: 4px solid @white;
 }

 .bordered-right-5 {
     border-right: 5px solid @white;
 }

 .bordered-themeprimary {
     border-color: @theme-primary !important;
 }
 .bordered-themesecondary {
     border-color: @theme-secondary !important;
 }
 .bordered-themethirdcolor {
     border-color: @theme-thirdcolor !important;
 }
 .bordered-themefourthcolor {
     border-color: @theme-fourthcolor !important;
 }
 .bordered-themefifthcolor {
     border-color: @theme-fifthcolor !important;
 }
.bordered-white {
    border-color: @white !important;
}

.bordered-snow {
    border-color: @snow !important;
}

.bordered-whitesmoke {
    border-color: @whitesmoke !important;
}

.bordered-seashell {
    border-color: @seashell !important;
}

.bordered-ivory {
    border-color: @ivory !important;
}

.bordered-platinum {
    border-color: @platinum !important;
}

.bordered-lightgray {
    border-color: @lightgray !important;
}

.bordered-gray {
    border-color: @gray !important;
}

.bordered-darkgray {
    border-color: @darkgray !important;
}

.bordered-silver {
    border-color: @silver !important;
}

.bordered-sonic-silver {
    border-color: @sonic-silver !important;
}

.bordered-storm-cloud {
    border-color: @storm-cloud !important;
}

.bordered-lightcarbon {
    border-color: @lightcarbon !important;
}

.bordered-carbon {
    border-color: @carbon !important;
}

.bordered-slate-gray {
    border-color: @slate-gray !important;
}

.bordered-darkcarbon {
    border-color: @darkcarbon !important;
}

.bordered-blue {
    border-color: @blue !important;
}



.bordered-sky {
    border-color: @sky !important;
}



.bordered-azure {
    border-color: @azure !important;
}

.bordered-blueberry {
    border-color: @blueberry !important;
}

.bordered-palegreen {
    border-color: @palegreen !important;
}


.bordered-green {
    border-color: @green !important;
}

.bordered-lightyellow {
    border-color: @lightyellow !important;
}

.bordered-yellow {
    border-color: @yellow !important;
}


.bordered-gold {
    border-color: @gold !important;
}

.bordered-orange {
    border-color: @orange !important;
}

.bordered-darkred {
    border-color: @darkred !important;
}

.bordered-darkorange {
    border-color: @darkorange !important;
}

.bordered-red {
    border-color: @red !important;
}

.bordered-pink {
    border-color: @pink !important;
}

.bordered-darkpink {
    border-color: @darkpink !important;
}

.bordered-magenta {
    border-color: @magenta !important;
}

.bordered-purple {
    border-color: @purple !important;
}

.bordered-maroon {
    border-color: @maroon !important;
}

.bordered-radius {
    -webkit-border-radius: 2px !important;
    -moz-border-radius: 2px !important;
    border-radius: 2px !important;
}

.bordered-radius-4 {
    -webkit-border-radius: 4px !important;
    -moz-border-radius: 4px !important;
    border-radius: 4px !important;
}

.bordered-radius-6 {
    -webkit-border-radius: 6px !important;
    -moz-border-radius: 6px !important;
    border-radius: 6px !important;
}

/* Size modifiers
 ========================================================================== */

.text-small {
  font-size: @text-small-font-size;
  line-height: @text-small-line-height;
}

.text-large {
  font-size: @text-large-font-size;
  line-height: @text-large-line-height;
}

/* Alignment modifiers
 ========================================================================== */

.text-left { text-align: left !important; }
.text-right { text-align: right !important; }
.text-center { text-align: center !important; }
.text-justify { text-align: justify !important; }

.text-top { vertical-align: top !important; }
.text-middle { vertical-align: middle !important; }
.text-bottom { vertical-align: bottom !important; }

/* Weight modifiers
 ========================================================================== */

.text-bold { font-weight: bold !important; }

/* Only tablets portrait */
@media (min-width: @screen-sm) and (max-width: @screen-sm-max) {

  .text-center-medium { text-align: center !important; }

}

/* Phone landscape and smaller */
@media (max-width: @screen-xs-max) {

  .text-center-small { text-align: center !important; }

}


/* Wrap modifiers
 ========================================================================== */

/*
 * Prevent text from wrapping onto multiple lines
 */

.text-nowrap { white-space: nowrap; }

/*
 * Prevent text from wrapping onto multiple lines, and truncate with an ellipsis
 */

.text-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/*
 * Break strings if their length exceeds the width of their container
 */

.text-break {
  word-wrap: break-word;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  -moz-hyphens: auto;
  hyphens: auto;
}


/*#region Blue Button*/

.btn-blue {
    &, &:focus {
        background-color: @blue !important;
        border-color: @blue;
        color: @white;
    }
    &:hover {
        color: @white;
    }
    &.dropdown-toggle {
        border-left-color: #81c1fb !important;
    }
    &.active {
        background-color: #449cec !important;
        border-color: #3d90db;
    }
    &.shiny {
        .background-image(linear-gradient(linear, left top, left bottom, from(#70bafd), to(#449cec)));
    }
}
.btn-blue:hover, .open .btn-blue.dropdown-toggle {
    background-color: #70bafd !important;
    border-color: #70bafd;
    color: #fff;
}
.btn-blue.disabled, .btn-blue[disabled], fieldset[disabled] .btn-blue, .btn-blue.disabled:hover, .btn-blue[disabled]:hover, fieldset[disabled] .btn-blue:hover, .btn-blue.disabled:focus, .btn-blue[disabled]:focus, fieldset[disabled] .btn-blue:focus, .btn-blue.disabled:active, .btn-blue[disabled]:active, fieldset[disabled] .btn-blue:active, .btn-blue.disabled.active, .btn-blue[disabled].active, fieldset[disabled] .btn-blue.active {
    background-color: @blue !important;
    border-color: @blue;
    .opacity(.5);
}
/*#endregion Blue Button*/
/*#region sky Button*/

.btn-sky {
    &, &:focus {
        background-color: @sky !important;
        border-color: @sky;
        color: @white;
    }
    &:hover {
        color: @white;
    }
    &.dropdown-toggle {
        border-left-color: #81c1fb !important;
    }
    &.active {
        background-color: #2095b0 !important;
        border-color: #2f97af;
    }
    &.shiny {
        .background-image(linear-gradient(linear, left top, left bottom, from(#28b3d3), to(#2095b0)));
    }
}
.btn-sky:hover, .open .btn-sky.dropdown-toggle {
    background-color: #28b3d3 !important;
    border-color: #28b3d3;
    color: #fff;
}
.btn-sky.disabled, .btn-sky[disabled], fieldset[disabled] .btn-sky, .btn-sky.disabled:hover, .btn-sky[disabled]:hover, fieldset[disabled] .btn-sky:hover, .btn-sky.disabled:focus, .btn-sky[disabled]:focus, fieldset[disabled] .btn-sky:focus, .btn-sky.disabled:active, .btn-sky[disabled]:active, fieldset[disabled] .btn-sky:active, .btn-sky.disabled.active, .btn-sky[disabled].active, fieldset[disabled] .btn-sky.active {
    background-color: @sky !important;
    border-color: @sky;
    .opacity(.5);
}
/*#endregion sky Button*/
/*#region azure Button*/

.btn-azure {
    &, &:focus {
        background-color: @azure !important;
        border-color: @azure;
        color: @white;
    }
    &:hover {
        color: @white;
    }
    &.dropdown-toggle {
        border-left-color: #3ecdf1 !important;
    }
    &.active {
        background-color: #2badce !important;
        border-color: #2badce;
    }
    &.shiny {
        .background-image(linear-gradient(linear, left top, left bottom, from(#3ecdf1), to(#2badce)));
    }
}
.btn-azure:hover, .open .btn-azure.dropdown-toggle {
    background-color: #3ecdf1 !important;
    border-color: #3ecdf1;
    color: #fff;
}
.btn-azure.disabled, .btn-azure[disabled], fieldset[disabled] .btn-azure, .btn-azure.disabled:hover, .btn-azure[disabled]:hover, fieldset[disabled] .btn-azure:hover, .btn-azure.disabled:focus, .btn-azure[disabled]:focus, fieldset[disabled] .btn-azure:focus, .btn-azure.disabled:active, .btn-azure[disabled]:active, fieldset[disabled] .btn-azure:active, .btn-azure.disabled.active, .btn-azure[disabled].active, fieldset[disabled] .btn-azure.active {
    background-color: @azure !important;
    border-color: @azure;
    .opacity(.5);
}
/*#endregion azure Button*/
/*#region palegreen Button*/

.btn-palegreen {
    &, &:focus {
        background-color: @palegreen !important;
        border-color: @palegreen;
        color: @white;
    }
    &:hover {
        color: @white;
    }
    &.dropdown-toggle {
        border-left-color: #a6d791 !important;
    }
    &.active {
        background-color: #74aa5d !important;
        border-color: #699755;
    }
    &.shiny {
        .background-image(linear-gradient(linear, left top, left bottom, from(#9cd584), to(#74aa5d)));
    }
}
.btn-palegreen:hover, .open .btn-palegreen.dropdown-toggle {
    background-color: #9cd584 !important;
    border-color: #9cd584;
    color: #fff;
}
.btn-palegreen.disabled, .btn-palegreen[disabled], fieldset[disabled] .btn-palegreen, .btn-palegreen.disabled:hover, .btn-palegreen[disabled]:hover, fieldset[disabled] .btn-palegreen:hover, .btn-palegreen.disabled:focus, .btn-palegreen[disabled]:focus, fieldset[disabled] .btn-palegreen:focus, .btn-palegreen.disabled:active, .btn-palegreen[disabled]:active, fieldset[disabled] .btn-palegreen:active, .btn-palegreen.disabled.active, .btn-palegreen[disabled].active, fieldset[disabled] .btn-palegreen.active {
    background-color: @palegreen !important;
    border-color: @palegreen;
    .opacity(.5);
}
/*#endregion palegreen Button*/
/*#region yellow Button*/

.btn-yellow {
    &, &:focus {
        background-color: @yellow !important;
        border-color: @yellow;
        color: @white;
    }
    &:hover {
        color: @white;
    }
    &.dropdown-toggle {
        border-left-color: @lightyellow !important;
    }
    &.active {
        background-color: #fbc220 !important;
        border-color: #f3ba17;
        color: @white !important;
    }
    &.shiny {
        .background-image(linear-gradient(linear, left top, left bottom, from(#fdd35a), to(#fbc220)));
    }
}
.btn-yellow:hover, .open .btn-yellow.dropdown-toggle {
    background-color: #fdd35a !important;
    border-color: #fdd35a;
    color: #fff;
}
.btn-yellow.disabled, .btn-yellow[disabled], fieldset[disabled] .btn-yellow, .btn-yellow.disabled:hover, .btn-yellow[disabled]:hover, fieldset[disabled] .btn-yellow:hover, .btn-yellow.disabled:focus, .btn-yellow[disabled]:focus, fieldset[disabled] .btn-yellow:focus, .btn-yellow.disabled:active, .btn-yellow[disabled]:active, fieldset[disabled] .btn-yellow:active, .btn-yellow.disabled.active, .btn-yellow[disabled].active, fieldset[disabled] .btn-yellow.active {
    background-color: @yellow !important;
    border-color: @yellow;
    .opacity(.5);
}
/*#endregion yellow Button*/
/*#region darkorange Button*/

.btn-darkorange {
    &, &:focus {
        background-color: @darkorange !important;
        border-color: @darkorange;
        color: @white;
    }
    &:hover {
        color: @white;
    }
    &.dropdown-toggle {
        border-left-color: #f07154 !important;
    }
    &.active {
        background-color: #da411f !important;
        border-color: #cc3918;
    }
    &.shiny {
        .background-image(linear-gradient(linear, left top, left bottom, from(#ef694b), to(#da411f)));
    }
}
.btn-darkorange:hover, .open .btn-darkorange.dropdown-toggle {
    background-color: #ef694b !important;
    border-color: #ef694b;
    color: #fff;
}
.btn-darkorange.disabled, .btn-darkorange[disabled], fieldset[disabled] .btn-darkorange, .btn-darkorange.disabled:hover, .btn-darkorange[disabled]:hover, fieldset[disabled] .btn-darkorange:hover, .btn-darkorange.disabled:focus, .btn-darkorange[disabled]:focus, fieldset[disabled] .btn-darkorange:focus, .btn-darkorange.disabled:active, .btn-darkorange[disabled]:active, fieldset[disabled] .btn-darkorange:active, .btn-darkorange.disabled.active, .btn-darkorange[disabled].active, fieldset[disabled] .btn-darkorange.active {
    background-color: @darkorange !important;
    border-color: @darkorange;
    .opacity(.5);
}
/*#endregion darkorange Button*/
/*#region magenta Button*/

.btn-magenta {
    &, &:focus {
        background-color: @magenta !important;
        border-color: @magenta;
        color: @white;
    }
    &:hover {
        color: @white;
    }
    &.dropdown-toggle {
        border-left-color: #c96d8c !important;
    }
    &.active {
        background-color: #a5325a !important;
        border-color: #9f3156;
    }
    &.shiny {
        .background-image(linear-gradient(linear, left top, left bottom, from(#c46283), to(#a5325a)));
    }
}
.btn-magenta:hover, .open .btn-magenta.dropdown-toggle {
    background-color: #c46283 !important;
    border-color: #c46283;
    color: #fff;
}
.btn-magenta.disabled, .btn-magenta[disabled], fieldset[disabled] .btn-magenta, .btn-magenta.disabled:hover, .btn-magenta[disabled]:hover, fieldset[disabled] .btn-magenta:hover, .btn-magenta.disabled:focus, .btn-magenta[disabled]:focus, fieldset[disabled] .btn-magenta:focus, .btn-magenta.disabled:active, .btn-magenta[disabled]:active, fieldset[disabled] .btn-magenta:active, .btn-magenta.disabled.active, .btn-magenta[disabled].active, fieldset[disabled] .btn-magenta.active {
    background-color: @magenta !important;
    border-color: @magenta;
    .opacity(.5);
}
/*#endregion magenta Button*/
/*#region purple Button*/

.btn-purple {
    &, &:focus {
        background-color: @purple !important;
        border-color: @purple;
        color: @white;
    }
    &:hover {
        color: @white;
    }
    &.dropdown-toggle {
        border-left-color: #9852ae !important;
    }
    &.active {
        background-color: #69257e !important;
        border-color: #601e74;
    }
    &.shiny {
        .background-image(linear-gradient(linear, left top, left bottom, from(#8c44a2), to(#69257e)));
    }
}
.btn-purple:hover, .open .btn-purple.dropdown-toggle {
    background-color: #8c44a2 !important;
    border-color: #8c44a2;
    color: #fff;
}
.btn-purple.disabled, .btn-purple[disabled], fieldset[disabled] .btn-purple, .btn-purple.disabled:hover, .btn-purple[disabled]:hover, fieldset[disabled] .btn-purple:hover, .btn-purple.disabled:focus, .btn-purple[disabled]:focus, fieldset[disabled] .btn-purple:focus, .btn-purple.disabled:active, .btn-purple[disabled]:active, fieldset[disabled] .btn-purple:active, .btn-purple.disabled.active, .btn-purple[disabled].active, fieldset[disabled] .btn-purple.active {
    background-color: @purple !important;
    border-color: @purple;
    .opacity(.5);
}
/*#endregion purple Button*/
/*#region maroon Button*/

.btn-maroon {
    &, &:focus {
        background-color: @maroon !important;
        border-color: @maroon;
        color: @white;
    }
    &:hover {
        color: @white;
    }
    &.dropdown-toggle {
        border-left-color: #b55274 !important;
    }
    &.active {
        background-color: #7c1138 !important;
        border-color: #9f3156;
    }
    &.shiny {
        .background-image(linear-gradient(linear, left top, left bottom, from(#a82856), to(#86123c)));
    }
}
.btn-maroon:hover, .open .btn-maroon.dropdown-toggle {
    background-color: #a82856 !important;
    border-color: #a82856;
    color: #fff;
}
.btn-maroon.disabled, .btn-maroon[disabled], fieldset[disabled] .btn-maroon, .btn-maroon.disabled:hover, .btn-maroon[disabled]:hover, fieldset[disabled] .btn-maroon:hover, .btn-maroon.disabled:focus, .btn-maroon[disabled]:focus, fieldset[disabled] .btn-maroon:focus, .btn-maroon.disabled:active, .btn-maroon[disabled]:active, fieldset[disabled] .btn-maroon:active, .btn-maroon.disabled.active, .btn-maroon[disabled].active, fieldset[disabled] .btn-maroon.active {
    background-color: @maroon !important;
    border-color: @maroon;
    .opacity(.5);
}
/*#endregion maroon Button*/

/* badge
 ========================================================================== */
 .badge-primary {
     background-color: @badge-primary;
 }
 
 .badge-success {
     background-color: @badge-success;
 }
 
 .badge-info {
     background-color: @badge-info;
 }
 
 .badge-warning {
     background-color: @badge-warning;
 }
 
 .badge-danger {
     background-color: @badge-danger;
 }



 /* componet
 ========================================================================== */
   .component-btn {
    display: inline-block;
   }

  .component-btn, .ie8 .component-btn:hover {
  filter: none
 }

 .component-btn, .component-btn:hover {
  -webkit-transition: all .3s ease;
  -moz-transition: all .3s ease;
  -ms-transition: all .3s ease;
  -o-transition: all .3s ease
 }

 .component-btn {
  height: 60px;
  min-width: 80px;
  margin: 5px 5px 0 0;
  border: 1px solid #ddd;
  padding: 12px 0 0;
  background-color: #fafafa;
  background-image: none;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  color: #646464;
  text-shadow: none;
  text-align: center;
  cursor: pointer;
  position: relative;
  transition: all .3s ease
 }

 .component-btn:hover, .component-btn:hover>.badge {
  -webkit-box-shadow: none;
  -moz-box-shadow: none
 }

 .component-btn:hover {
  text-decoration: none;
  border-color: #999;
  color: #444;
  text-shadow: 0 1px 0 #fff;
  transition: all .3s ease;
  box-shadow: none
 }
 .component-btn:hover>.badge {
  -webkit-transition: all .3s ease;
  -moz-transition: all .3s ease;
  -ms-transition: all .3s ease;
  -o-transition: all .3s ease;
  transition: all .3s ease;
  box-shadow: none
 }
 .component-btn > div {
  margin-top: 5px;
  margin-bottom: 20px;
  color: #000;
  font-size: 12px;
  font-weight: 300
 }
 .component-btn>.badge {
  position: absolute;
  font-size: 11px;
  font-weight: 300;
  top: -5px;
  right: -5px;
  padding: 3px 6px;
  color: #fff;
  text-shadow: none;
  border-width: 0;
  border-style: solid;
  -webkit-border-radius: 12px;
  -moz-border-radius: 12px;
  border-radius: 12px;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none
 }

 .component-btn>i {
  font-size: 18px
 }

/* Hack
 ========================================================================== */

/*
Internet Explorer 10 doesn't differentiate device width from viewport width, and thus doesn't
properly apply the media queries in Bootstrap's CSS. To address this,
you can optionally include the following CSS and JavaScript to work around this problem until Microsoft issues a fix.
*/
@-webkit-viewport {
  width: device-width;
}

@-moz-viewport {
  width: device-width;
}

@-ms-viewport {
  width: device-width;
}

@-o-viewport {
  width: device-width;
}

@viewport {
  width: device-width;
}

/* Internet Explorer 10 doesn't differentiate device width from viewport width,
and thus doesn't properly apply the media queries in Bootstrap's CSS. To address this, following CSS code applied */
@-ms-viewport {
  width: auto !important;
}

/* ie8 & ie9 modes */
.visible-ie8 {
  display: none;
}

.ie8 .visible-ie8 {
  display: inherit !important;
}

.visible-ie9 {
  display: none;
}

.ie9 .visible-ie9 {
  display: inherit !important;
}

.hidden-ie8 {
  display: inherit;
}

.ie8 .hidden-ie8 {
  display: none !important;
}

.hidden-ie9 {
  display: inherit;
}

.ie9 .hidden-ie9 {
  display: none !important;
}

